<template>
  <el-dialog
    :title="model === 'add' ? '新增题库测试' : '编辑题库测试'"
    fullscreen
    :visible.sync="isShow"
  >
    <el-form
      label-width="80px"
      :model="from"
      ref="from1"
      class="form"
      :rules="rules"
    >
      <el-form-item prop="subject" label="学科">
        <el-select
          v-model="from.subject"
          @visible-change="visibleChange"
          placeholder="请选择"
        >
          <el-option
            v-for="item in subject"
            :key="item.id"
            :label="item.short_name ? item.short_name : item.id"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="step" label="阶段">
        <el-select v-model="from.step" placeholder="请选择">
          <el-option label="初级" value="1"> </el-option>
          <el-option label="中级" value="2"> </el-option>
          <el-option label="高级" value="3"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="enterprise" label="企业">
        <el-select
          v-model="from.enterprise"
          @visible-change="visibleChangeEnterprise"
          placeholder="请选择"
        >
          <el-option
            v-for="item in enterprise"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="city" label="城市">
        <el-cascader size="large" v-model="from.city" :options="options">
        </el-cascader>
      </el-form-item>
      <el-form-item prop="type" label="题型">
        <el-radio v-model="from.type" label="1">单选</el-radio>
        <el-radio v-model="from.type" label="2">多选</el-radio>
        <el-radio v-model="from.type" label="3">简答</el-radio>
      </el-form-item>
      <el-form-item prop="difficulty" label="难度">
        <el-radio v-model="from.difficulty" label="1">简单</el-radio>
        <el-radio v-model="from.difficulty" label="2">一般</el-radio>
        <el-radio v-model="from.difficulty" label="3">困难</el-radio>
      </el-form-item>
      <el-divider></el-divider>
      <el-form
        class="form"
        ref="from2"
        :model="from"
        label-position="top"
        :rules="rules"
      >
        <el-form-item prop="title" label="试题标题" style="text-align: left;">
          <quillEditor
            ref="myQuillEditor"
            :options="edoptions"
            v-model="from.title"
          ></quillEditor>
        </el-form-item>
        <div v-if="from.type ? from.type !== '3' : true">
          <el-form-item
            label="单选"
            style="text-align: left;"
            prop="single_select_answer"
            v-if="from.type ? from.type === '1' : true"
          >
            <div class="fromItem">
              <el-radio v-model="from.single_select_answer" label="A"
                >A</el-radio
              >

              <el-input
                tyep="text"
                v-model="from.select_options[0].text"
              ></el-input>
              <el-upload
                action="http://119.91.150.211:8080/heimamm/public/question/upload"
                class="avatar-uploader"
                v-model="from.select_options[0].image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="from.select_options[0].image"
                  :src="from.select_options[0].image"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="fromItem">
              <el-radio v-model="from.single_select_answer" label="B"
                >B</el-radio
              >

              <el-input
                tyep="text"
                v-model="from.select_options[1].text"
              ></el-input>
              <el-upload
                action="http://119.91.150.211:8080/heimamm/public/question/upload"
                class="avatar-uploader"
                v-model="from.select_options[1].image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess2"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="from.select_options[1].image"
                  :src="from.select_options[1].image"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="fromItem">
              <el-radio v-model="from.single_select_answer" label="C"
                >C</el-radio
              >

              <el-input
                tyep="text"
                v-model="from.select_options[2].text"
              ></el-input>
              <el-upload
                action="http://119.91.150.211:8080/heimamm/public/question/upload"
                class="avatar-uploader"
                v-model="from.select_options[2].image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess3"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="from.select_options[2].image"
                  :src="from.select_options[2].image"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <div class="fromItem">
              <el-radio v-model="from.single_select_answer" label="D"
                >D</el-radio
              >

              <el-input
                tyep="text"
                v-model="from.select_options[3].text"
              ></el-input>
              <el-upload
                action="http://119.91.150.211:8080/heimamm/public/question/upload"
                class="avatar-uploader"
                v-model="from.select_options[3].image"
                :show-file-list="false"
                :on-success="handleAvatarSuccess4"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="from.select_options[3].image"
                  :src="from.select_options[3].image"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item
            v-else-if="from.type === '2'"
            label="多选"
            style="text-align: left;"
            prop="multiple_select_answer"
          >
            <el-checkbox-group v-model="from.multiple_select_answer">
              <div class="fromItem">
                <el-checkbox label="A">A</el-checkbox>

                <el-input
                  tyep="text"
                  v-model="from.select_options[0].text"
                ></el-input>
                <el-upload
                  action="http://119.91.150.211:8080/heimamm/public/question/upload"
                  class="avatar-uploader"
                  v-model="from.select_options[0].image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="from.select_options[0].image"
                    :src="from.select_options[0].image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
              <div class="fromItem">
                <el-checkbox label="B">B</el-checkbox>
                <el-input
                  tyep="text"
                  v-model="from.select_options[1].text"
                ></el-input>
                <el-upload
                  action="http://119.91.150.211:8080/heimamm/public/question/upload"
                  class="avatar-uploader"
                  v-model="from.select_options[1].image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess2"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="from.select_options[1].image"
                    :src="from.select_options[1].image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>

              <div class="fromItem">
                <el-checkbox label="C">C</el-checkbox>
                <el-input
                  tyep="text"
                  v-model="from.select_options[2].text"
                ></el-input>
                <el-upload
                  action="http://119.91.150.211:8080/heimamm/public/question/upload"
                  class="avatar-uploader"
                  v-model="from.select_options[2].image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess3"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="from.select_options[2].image"
                    :src="from.select_options[2].image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>

              <div class="fromItem">
                <el-checkbox label="D">D</el-checkbox>
                <el-input
                  tyep="text"
                  v-model="from.select_options[3].text"
                ></el-input>
                <el-upload
                  action="http://119.91.150.211:8080/heimamm/public/question/upload"
                  class="avatar-uploader"
                  v-model="from.select_options[3].image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess4"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="from.select_options[3].image"
                    :src="from.select_options[3].image"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-checkbox-group>
          </el-form-item>
        </div>
        <el-form-item
          v-else-if="from.type === '3'"
          label="简答"
          class="textarea"
          prop="short_answer"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="from.short_answer"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="解析视频" class="formItem2">
          <div style="margin-left: 30px; text-align: center;">
            <el-upload
              action="http://119.91.150.211:8080/heimamm/public/question/upload"
              class="avatar-uploader"
              v-model="from.video"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload2"
            >
              <video
                v-if="from.video"
                autoplay
                controls
                :src="from.video"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span>只能上传视频格式文件</span>
          </div>
        </el-form-item>
        <el-form-item
          label="答案解析"
          prop="answer_analyze"
          style="text-align: left;"
        >
          <quillEditor
            ref="myQuillEditor"
            :options="edoptions"
            v-model="from.answer_analyze"
          ></quillEditor>
        </el-form-item>
      </el-form>
      <el-divider style="margin: 50px 0;"></el-divider>
      <el-form-item label="试题备注" prop="remark">
        <el-input type="text" v-model="from.remark"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="text-align:center">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="addEvent">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { questionAdd, questionEdit } from '@/api/questionbank.js'
import { regionData } from 'element-china-area-data'
// 富文本引入
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  props: {
    subject: {
      required: true,
      type: Array
    },
    enterprise: {
      required: true,
      type: Array
    }
  },
  data () {
    return {
      model: 'add',
      isShow: false,
      options: regionData,
      checkout: 'radio', // 单选 radio 多选 multipleChoice 简答 shortAnswer
      from: {
        subject: '', //	是	int	学科id标识
        step: '', //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: '', //	是	int	企业id标识
        city: [], //	是	array	[省、市、区县]
        type: '', //	是	string	题型 1单选 、2多选 、3简答
        difficulty: '', //	是	int	题目难度 1简单 、2一般 、3困难
        title: '', //	是	string	标题
        single_select_answer: '', //	是	string	单选题答案
        multiple_select_answer: [], //	是	array	多选题答案
        short_answer: '', //	是	string	简答题答案
        video: '', //	否	string	解析视频地址
        answer_analyze: '', //	是	string	答案解析
        remark: '', //	是	string	答案备注
        select_options: [
          { label: 'A', text: '', image: '' },
          { label: 'B', text: '', image: '' },
          { label: 'C', text: '', image: '' },
          { label: 'D', text: '', image: '' }
        ] //	是	array	选项，介绍，图片介绍
      },
      rules: {
        subject: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	学科id标识
        step: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	阶段1、初级 2、中级 3、高级
        enterprise: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	企业id标识
        city: [{ required: true, message: '必填', trigger: 'change' }], //	是	array	[省、市、区县]
        type: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	题型 1单选 、2多选 、3简答
        difficulty: [{ required: true, message: '必填', trigger: 'change' }], //	是	int	题目难度 1简单 、2一般 、3困难
        title: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	标题
        single_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ], //	是	string	单选题答案
        multiple_select_answer: [
          { required: true, message: '必填', trigger: 'change' }
        ], //	是	array	多选题答案
        short_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	简答题答案
        answer_analyze: [
          { required: true, message: '必填', trigger: 'change' }
        ], //	是	string	答案解析
        remark: [{ required: true, message: '必填', trigger: 'change' }] //	是	string	答案备注
      },
      edoptions: {
        theme: 'snow',
        placeholder: '请在这里输入'
      }
    }
  },
  methods: {
    // 企业选择器
    visibleChangeEnterprise () {
      this.$emit('input')
    },
    //学科选择器
    visibleChange () {
      this.$emit('visibleChange')
    },
    // 上传视频显示
    handleAvatarSuccess (res, file) {
      console.log(res, file)
      this.from.video = URL.createObjectURL(file.raw)
    },
    // 上传视频限制
    beforeAvatarUpload2 (file) {
      const isJPG = file.type === 'video/mp4'
      const isLt2M = file.size / 1024 / 1024 < 8

      if (!isJPG) {
        this.$message.error('上传视频只能是 MP4 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传视频大小不能超过 8MB!')
      }
      return isJPG && isLt2M
    },
    // 上传显示
    handleAvatarSuccess1 (res, file) {
      //   console.log(res, file, flieList)
      this.from.select_options[0].image = URL.createObjectURL(file.raw)
      //   console.log(this.from.select_options)
    },
    handleAvatarSuccess2 (res, file) {
      //   console.log(res, file, flieList)
      this.from.select_options[1].image = URL.createObjectURL(file.raw)
      //   console.log(this.from.select_options)
    },
    handleAvatarSuccess3 (res, file) {
      //   console.log(res, file, flieList)
      this.from.select_options[2].image = URL.createObjectURL(file.raw)
      //   console.log(this.from.select_options)
    },
    handleAvatarSuccess4 (res, file) {
      //   console.log(res, file, flieList)
      this.from.select_options[3].image = URL.createObjectURL(file.raw)
      //   console.log(this.from.select_options)
    },
    // 上传限制
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    // 点击确认按钮
    async addEvent () {
      let r1 = ''
      let r2 = ''
      this.$refs.from1.validate(r => (r1 = r))
      this.$refs.from2.validate(r => (r2 = r))

      console.log('r1', r1)
      console.log('r2', r2)
      if (r1 && r2) {
        if (this.model === 'add') {
          await questionAdd(this.from)
          this.$message.success('新增题目成功')
        } else if (this.model === 'edit') {
          await questionEdit(this.from)
          this.$message.success('编辑题目成功')
        }
        this.isShow = false
        this.$emit('getData')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  color: #ffff;
  // height: 30px;
  background: linear-gradient(90deg, #01c5fa, #1394fa);
  text-align: left;
  .el-dialog__title {
    height: 53px;
    color: #ffff;
    font-size: 16px;
  }
  .el-icon-close:before {
    color: #ffff;
  }
}

.form {
  width: 832px;
  margin: 0 auto;

  ::v-deep .el-form-item__label {
    text-align: left;
  }

  ::v-deep .el-form-item__content {
    text-align: left;
  }
}

.fromItem {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
// 上传
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.formItem2 {
  text-align: left;
  display: flex;
}

::v-deep .el-divider {
  margin: 50px 0;
  background-color: #606266;
}

.textarea {
  display: flex;

  ::v-deep .el-form-item__label {
    width: 96px;
  }

  ::v-deep .el-form-item__content {
    width: 100%;
  }
}
</style>
